<template>
  <div
    :style="'height:' + fullHeight + 'px;'"
    class="login"
    v-loading="loading"
    element-loading-text="登录中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0, 0, 0, 0.8)"
  >
    <div class="logo">
      <img src="logo.png" alt="" />
    </div>
    <el-row class="loginform">
      <el-col :span="13">
        <el-card class="content">
          <div style="padding: 14px">
            <div style="margin-bottom: 27px">
              <span class="title">WELCOME</span>
            </div>
            <div class="bottom clearfix">
              <el-form
                :model="ruleForm"
                status-icon
                :rules="rules"
                ref="ruleForm"
                label-width="0px"
                class="demo-ruleForm"
              >
                <el-form-item label prop="checkname">
                  <el-input
                    autocomplete="on"
                    type="primary"
                    v-model="ruleForm.checkname"
                    placeholder="请输入账号"
                    status-icon="true"
                  ></el-input>
                </el-form-item>
                <el-form-item label prop="checkpass">
                  <!--submitForm('ruleForm') 必须添加单引号 -->
                  <el-input
                    show-password
                    type="password"
                    v-model="ruleForm.checkpass"
                    autocomplete="off"
                    placeholder="请输入密码"
                    @keyup.enter.native="submitForm('ruleForm')"
                  ></el-input>
                </el-form-item>
                <el-form-item>
                  <el-button
                    element-loading-text="拼命加载中"
                    type="primary"
                    @click="submitForm('ruleForm')"
                    size="primary"
                    class="loginbtn"
                    >登 录</el-button
                  >
                </el-form-item>
                <el-form-item>
                  <el-checkbox v-model="checked">记住密码</el-checkbox>
                  <el-button
                    type="text"
                    class="button forget"
                    @click="updatepass"
                    >忘记密码?</el-button
                  >
                </el-form-item>
              </el-form>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
// import activeRouter from "../router/activeRouter.js";
import { mapMutations } from 'vuex'
export default {
  name: "login",
  data() {
    var checkusername = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("用户名不能为空"));
      } else {
        if (this.ruleForm.username !== "") {
          this.$refs.ruleForm.validateField("checkusername");
        }
        callback();
      }
    };
    var checkpass = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("密码不能为空"));
      } else {
        if (this.ruleForm.pass !== "") {
          this.$refs.ruleForm.validateField("checkpass");
        }
        callback();
      }
    };
    return {
      ruleForm: {
        pass: "",
        username: ""
      },
      rules: {
        checkname: [
          {
            validator: checkusername,
            trigger: "blur"
          }
        ],
        checkpass: [
          {
            validator: checkpass,
            trigger: "blur"
          }
        ]
      },
      currentDate: new Date(),
      checked: false,
      loading: false,
      fullHeight: document.documentElement.clientHeight
    };
  },
  methods: {
    ...mapMutations(['changeLogin']),
    //登录操作
    submitForm(formName) {
      //验证
      this.$refs[formName].validate(valid => {
        if (valid) {
          this.loading = true;
          this.$axios
            .post(
              this.$api.login.login.login,
              JSON.stringify({
                adminUsername: this.ruleForm.checkname,
                adminPassword: this.ruleForm.checkpass
              }),
              //请求头
              {
                headers: {
                  "Content-Type": "application/json"
                }
              }
            )
            .then(response => {
              console.log(response);
              if (response.data.msg === "登录成功!") {
                //存储信息
                // this.$store.commit("logsuccess", response.data.data);
                //添加路由
                // activeRouter.DynamicAddRouter();
                // sessionStorage.setItem("token", response.data.token);
                this.changeLogin({token: response.data.token})
                sessionStorage.setItem(
                  "menuInfo",
                  JSON.stringify(response.data.data)
                );
                sessionStorage.setItem("username", this.ruleForm.checkname);
                this.msg(response.data.msg, "success");
                this.loading = false;
                this.$router.push("/Home");
              } else {
                this.msg(response.data.msg, "warning");
                this.loading = false;
              }
            })
            .catch(err => {
              this.$message.error("登录超时!");
              this.loading = false;
              console.log(err);
            });
        } else {
          this.msg("请输入", "warning");
          return false;
        }
      });
    },
    //重置
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //loading框
    msg(msg, type) {
      this.$message({
        message: msg,
        center: true,
        type: type,
        customClass: "msg",
        duration: 1000
      });
    },
    get_bodyHeight() {
      const that = this;
      window.onresize = () => {
        return (() => {
          window.fullHeight = document.documentElement.clientHeight;
          that.fullHeight = window.fullHeight;
        })();
      };
    },
    //忘记密码
    updatepass() {
      this.$router.push("/forgetpass");
    }
  },
  watch: {
    //监控浏览器高度变化
    fullHeight(val) {
      if (!this.timer) {
        this.fullHeight = val;
        this.timer = true;
        let that = this;
        setTimeout(function() {
          that.timer = false;
        }, 400);
      }
    }
  },
  mounted() {
    this.get_bodyHeight();
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
@import url("../assets/fonts/font.css");

* {
  padding: 0;
  margin: 0;
  /* font-family: "tarjan"; */
}

.loginbtn {
  width: 100%;
  height: 40px;
}

.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
}

.title {
  font-size: 30px;
  color: white;
  font-family: "tarjan";
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both;
}

.loginform {
  margin: 0 0 0 60%;
  position: relative;
  top: 25%;
}

.login {
  height: 45.6rem;
  background: url("../assets/loginBackIMG2.png");
  background-size: cover;
  background-position: 0;
  background-repeat: no-repeat;
}

.el-form-item__label {
  text-align: center !important;
}

.el-form-item__error {
  color: azure !important;
}

.el-message {
  min-width: 200px !important;
}

.remenber {
  float: left;
}

input {
  border: none !important;
}

.el-input__suffix i {
  color: #999 !important;
}

.el-checkbox {
  margin-right: 6.625rem !important;
}

.forget {
  height: 2.5rem !important;
}
.el-form-item__error {
  padding-bottom: 13px;
}
.logo {
  width: 170px;
  position: absolute;
  top: 0;
  left: 0;
}
.logo img {
  width: 170px;
}
/deep/ .el-card {
  background-color: rgba(0, 0, 0, 0.4);
  border: none;
}
/deep/ .el-input {
  margin-bottom: 30px;
}
/deep/ .el-form-item__error {
  color: white;
  font-size: 12px;
  line-height: 1;
  padding-top: 4px;
  position: absolute;
  top: 57%;
  left: 5px;
}
/deep/ .el-input__inner {
  border-color: white !important;
}
/deep/ .el-input__icon {
  color: #c0c4cc !important;
}
</style>
